<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/temp/default/js/jquery-3.1.0.min.js"></script>
    <script src="/temp/default/js/flexible.debug.js"></script>
    <script src="/temp/default/js/flexible_css.debug.js"></script>
    <link rel="stylesheet" href="/temp/default/css/detail.css">
    <title>红包详情</title>
</head>
<body onload="init()">
    <div class="container">
        <div class="detail-box">
            <header class="title">领取状态：已领取</header>
            <p class="time">领取时间：{$orderinfo.add_time_format}</p>
            <p class="place">领取地点：{$orderinfo.address}</p>
            <div class="map">
                <div id="container"></div>
            </div>
        </div>
    </div>

    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        p{
            width:303px;
            padding-top:3px;
            overflow:hidden;
        }
        #container{
            min-width:300px;
            min-height:367px;
        }
    </style>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
    <script>
        var citylocation,map,marker = null;
        var lng = '{$orderinfo.lng}';
        var lat = '{$orderinfo.lat}';
        var init = function() {
            var center = new qq.maps.LatLng(lat,lng);
            map = new qq.maps.Map(document.getElementById('container'),{
                center: center,
                zoom: 13
            });
            //调用城市服务信息
            citylocation = new qq.maps.CityService({
                complete : function(results){
                    map.setCenter(results.detail.latLng);
                    if (marker != null) {
                        marker.setMap(null);
                    }
                    //设置marker标记
                    marker = new qq.maps.Marker({
                        map: map,
                        position: results.detail.latLng
                    });
                }
            });
            geolocation_latlng()
        };

        function geolocation_latlng() {
            var latLng = new qq.maps.LatLng(lat, lng);
            //调用城市经纬度查询接口实现经纬查询
            citylocation.searchCityByLatLng(latLng);
        }
    </script>

</body>
</html>

